<template>
	<view>
		<view class="img_top"><image :src="introduceData.courseImg" mode="widthFix"></image></view>
		<view class="menu_body">
			<view :class="type === 1 ? 'xz' : ''" @click="type = 1">介绍</view>
			<view :class="type === 2 ? 'xz' : ''" @click="type = 2">目录</view>
			<view :class="type === 3 ? 'xz' : ''" @click="type = 3">评价</view>
		</view>
		<view class="content_body" style="padding-bottom: 170rpx;">
			<view v-if="type === 1">
					<view class="introduce_item">
						<view>课程简介</view>
						<view>{{introduceData.courseExplain}}</view>
						<u-gap height="20" bg-color="#f0eff4"></u-gap>
					</view>
					<view class="introduce_item">
						<view>适合人群</view>
						<view>{{introduceData.proper}}</view>
						<u-gap height="20" bg-color="#f0eff4"></u-gap>
					</view>
					<view class="introduce_item">
						<view>讲师介绍</view>
						<view>{{introduceData.teacher}}</view>
						<u-gap height="20" bg-color="#f0eff4"></u-gap>
					</view>
			</view>
			<view v-else-if="type === 2">
				<block v-for="(item, index) in List" :key="index">
					<view class="directory_item">
						<view class="directory_title">{{ index }}</view>
						<block v-for="(itema, indexa) in item" :key="indexa">
							<view class="directory_knot">{{ itema.title }}</view>
						</block>
					</view>
				</block>
			</view>
			<view v-else-if="type === 3">
				<view class="score_item">
					<view>
						<view>课程简介</view>
						<view><u-rate count="count" v-model="value" inactive-color="#f5bd0d" size="70"></u-rate></view>
					</view>
					<u-gap height="20" bg-color="#f0eff4"></u-gap>
				</view>
				<block v-for="(item,index) in commentList" :key="index">
					<view class="evaluate_item">
						<view><image src="../../static/img/aboutUs.png" mode="widthFix"></image></view>
						<view>
							<view>
								<u-rate :disabled='true' :current="item.score" v-model="item.score" inactive-color="#f5bd0d" active-color='#ff0000' size="40"></u-rate>
								<text>2020-7-15</text>
							</view>
							<view>{{item.content}}</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<view class="bottom_menu">
			<view @click="btnIsdz">
				<i style='font-size: 60rpx;' :class="{'dz':isscdz.isLikes === 1}"  class="iconfont icon-dianzan" ></i>
				<text>点赞</text>
			</view>
			<view @click="btnIssc">
				<i style='font-size: 60rpx;' :class="{'sc':isscdz.isCollect === 1}" class="iconfont icon-shoucang"></i>
				<text>收藏</text>
			</view>
			<view @click="enterOrder()">参与该课程</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: 1,
			value: '',
			courseId:'',
			introduceData:[],
			List: [
				{
					title: '第一章节，电力系统基础知识',
					options: [
						{
							name: '第一节，电力系统基本概念'
						},
						{
							name: '第一节，电力系统基本概念'
						},
						{
							name: '第一节，电力系统基本概念'
						}
					]
				},
				{
					title: '第一章节，电力系统基础知识',
					options: [
						{
							name: '第一节，电力系统基本概念'
						},
						{
							name: '第一节，电力系统基本概念'
						},
						{
							name: '第一节，电力系统基本概念'
						}
					]
				},
				{
					title: '第一章节，电力系统基础知识',
					options: [
						{
							name: '第一节，电力系统基本概念'
						},
						{
							name: '第一节，电力系统基本概念'
						},
						{
							name: '第一节，电力系统基本概念'
						}
					]
				}
			],
			commentList:[],
			isscdz:''
		};
	},
	onLoad(option) {
		console.log(option.id)
		this.courseId = option.id;
		this.getdetails(option.id);
		this.getcritiqueCourse(option.id);
		this.getcourseCatalog(option.id);
		this.getislike(option.id);
	},
	methods: {
		getdetails(cid){
			this.$u.api.getCourseDetails({id:cid}).then(res => {
				this.introduceData = res.data.data;
			})
		},
		enterOrder(){
			uni.navigateTo({
				url:'../order/course_order'
			});
		},
		getcritiqueCourse(cid){
			this.$u.api.getcritiqueCourse({id:cid}).then(res => {
				if(res.data){
					this.commentList = res.data.data
				}
			})
		},
		getcourseCatalog(cid){
			this.$u.api.getcourseCatalog({id:cid}).then(res => {
				if(res){
					this.List = res.data;
					console.log(this.List);
				}
			})
		},
		getislike(cid){
			this.$u.api.getislike({id:cid}).then(res => {
				this.isscdz = res.data;
				console.log(this.isscdz)
			})
		},
		btnIsdz(){
			if(this.isscdz.isLikes === 0){
				this.$u.api.getisdz({id:this.courseId,flag:true}).then(res =>  {
					this.$refs.uToast.show({
						title: '点赞成功',
						type: 'success',
					});
					this.isscdz.isLikes = 1
				})
			}else if(this.isscdz.isLikes === 1){
				this.$u.api.getisdz({id:this.courseId,flag:false}).then(res =>  {
					this.isscdz.isLikes = 0
				})
			}
		},
		btnIssc(){
			if(this.isscdz.isCollect === 0){
				this.$u.api.getissc({id:this.courseId,flag:true}).then(res =>  {
					this.$refs.uToast.show({
						title: '收藏成功',
						type: 'success',
					});
					this.isscdz.isCollect = 1
				})
			}else if(this.isscdz.isCollect === 1){
				this.$u.api.getissc({id:this.courseId,flag:false}).then(res =>  {
					this.isscdz.isCollect = 0
				})
			}
		},
	}
};
</script>

<style lang="scss" scoped>
.img_top {
	width: 100%;
	> image {
		width: 100%;
	}
}
.menu_body {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	padding: 30rpx 0;
	font-size: 30rpx;
	> view {
		text-align: center;
		flex: 1;
	}
}
.introduce_item {
	background: #f7f6fb;
	> view {
		&:nth-child(1) {
			font-size: 40rpx;
			padding: 30rpx;
			border-bottom: 1rpx solid #ababab;
		}
		&:nth-child(2) {
			font-size: 30rpx;
			padding: 20rpx 50rpx;
		}
	}
}
.directory_title {
	background: #f0f0f0;
	font-size: 35rpx;
	padding: 20rpx;
}
.directory_knot {
	background: #f7f6fb;
	font-size: 30rpx;
	padding: 20rpx 40rpx;
	border-bottom: 1rpx solid #c8c8c8;
}
.score_item {
	> view {
		&:nth-child(1) {
			background: #f7f6fb;
			> view {
				&:nth-child(1) {
					font-size: 35rpx;
					padding: 20rpx;
					border-bottom: 1rpx solid #f0eff4;
				}
				&:nth-child(2) {
					text-align: center;
					padding: 50rpx 0;
				}
			}
		}
	}
}
.evaluate_item {
	display: flex;
	padding: 30rpx 0;
	background: #f7f6fb;
	border-bottom: 1rpx solid #dedde2;
	> view {
		&:nth-child(1) {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			> image {
				width: 80%;
				border-radius: 100%;
			}
		}
		&:nth-child(2) {
			flex: 5;
			> view {
				&:nth-child(1) {
					display: flex;
					justify-content: space-between;
					font-size: 20rpx;
					color: #acacac;
					padding: 0 20rpx;
				}
				&:nth-child(2) {
					font-size: 25rpx;
					padding: 0 20rpx;
					margin-top: 20rpx;
				}
			}
		}
	}
}
.xz {
	color: #8c84f3;
}
.bottom_menu {
	display: flex;
	position: fixed;
	z-index: 99;
	height: 130rpx;
	background: #fff;
	left: 0;
	right: 0;
	bottom: 0;
	> view {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
		&:nth-child(1) {
			flex: 3;
		}
		&:nth-child(2) {
			flex: 3;
		}
		&:nth-child(3) {
			flex: 7;
			color: #fff;
			background: #7167fc;
		}
		&:nth-child(1),&:nth-child(2){
			display: flex;
			flex-flow: column;
		}
	}
}
.dz{
	color: #8c84f3;
}
.sc{
	color: #d4237a;
}
</style>
